<template>
  <div>
    <swiper class="brand" indicator-dots="true" autoplay="true" interval="2000">
      <block v-for="(item,index) in swiperList" :key="index">
        <swiper-item class="swiper-item">
          <image mode="scaleToFill" :src="item.url" />
        </swiper-item>
      </block>
    </swiper>

    <h3>热门活动</h3>
    <ul>
      <li class="list" @click="goCounter">
        <span>1</span>
        <span>鸿鹏杀阿萨德阿萨德按时asdasdasdasdasdasd</span>
        <span>6588</span>
        <img src="/static/tabs/home-active.png" alt />
      </li>
    </ul>
  </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";

export default {
  components: {
    card
  },

  data() {
    return {
      logs: [],
      swiperList: [
        {
          url:
            "http://mss.sankuai.com/v1/mss_51a7233366a4427fa6132a6ce72dbe54/newsPicture/05558951-de60-49fb-b674-dd906c8897a6"
        },
        {
          url:
            "http://mss.sankuai.com/v1/mss_51a7233366a4427fa6132a6ce72dbe54/coursePicture/0fbcfdf7-0040-4692-8f84-78bb21f3395d"
        },
        {
          url:
            "http://mss.sankuai.com/v1/mss_51a7233366a4427fa6132a6ce72dbe54/management-school-picture/7683b32e-4e44-4b2f-9c03-c21f34320870"
        }
      ]
    };
  },
  methods: {
    goCounter() {
      const url = "../counter/main";
      mpvue.navigateTo({ url });
    }
  },

  created() {
    let logs;
    if (mpvuePlatform === "my") {
      logs = mpvue.getStorageSync({ key: "logs" }).data || [];
    } else {
      logs = mpvue.getStorageSync("logs") || [];
    }
    this.logs = logs.map(log => formatTime(new Date(log)));
  }
};
</script>

<style>
.brand {
  width: 100%;
}
.swiper-item {
  width: 100%;
}
.swiper-item image {
  width: 100%;
}
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.log-item {
  margin: 10rpx;
}
h3 {
  color: black;
  font-weight: 600;
  padding: 5px 0;
}
.list {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-top: 1px solid rgb(165, 165, 165);
  border-bottom: 1px solid rgb(165, 165, 165);
  height: 40px;
  align-items: center;
}
.list span:nth-child(1) {
  color: red;
}
.list span:nth-child(2) {
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100px;
}
.list span:nth-child(3) {
  color: rgb(134, 134, 134);
  font-size: 12px;
}
.list img {
  width: 20px;
  height: 20px;
}
</style>
